<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式布局</title>
<script src="../js/jquery.min.js"></script>
<link rel="stylesheet"
	href="../plugin/bootstrap/css/bootstrap.min.css">
<link href="../plugin/admin/css/style.min.css" rel="stylesheet">
<link href="../plugin/admin/css/materialdesignicons.min.css"
	rel="stylesheet">
<script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugin/ckeditor/ckeditor.js"></script>
<script>
	var pageNum = 1;//当前页
	var maxPage = 5;//最大页数，需要从数据库获取
	var off_on = true //获取新的一页，防止多次提交
	var lastPage = false; //是否已经获取到最后一页的数据了
	$(function() {
		getData(1);
		//下拉加载更多
		$(window)
				.scroll(
						function() {
							var s = $(window).scrollTop(), //滚轮滑动高度
							h = $(window).height(), //当前显示窗口高度
							documentH = $(document).height();//整个文档高度
							console.log("pageNum:" + pageNum + " s:" + s
									+ " h:" + h + " documentH:" + documentH)
							if ((s + h + 100) >= documentH) {
								//还有下一页
								if (pageNum <= maxPage) {
									if (off_on) {
										pageNum = pageNum + 1;
										//获取新的一页
										getData(pageNum)
										off_on = false;
									}
								} else {
									//第一次获取最后一页，此时添加备注
									if (!lastPage) {
										var tmp = '<div class="col-xs-12"><div style="text-align:center;color:red;" >已加载全部数据</div></div>'
										$("#zxbkMain").append(tmp)
										lastPage = true; //不允许再添加了
									}
								}
								off_on = true;
							}
						})
	})
	function getData(pageNum) {
		$
				.ajax({
					url : '../blog/getlist',
					dataType : "json",
					type : 'POST',
					cache : false,
					//async: true,//请求是否异步，默认为异步，这也是ajax重要特性
					data : {
						pageNum : pageNum,
						pageSize : 6
					}, //参数值
					success : function(data) {
						console.log("data:" + data)
						//$("#zxbkMain").empty();
						var zxbkBody = "";
						$
								.each(
										data.rows,
										function(n, blog) {
											var tmp = '<div class="col-xs-12 col-sm-12 col-md-10 col-lg-8 col-md-offset-2 col-lg-offset-2">'
													+ '<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 Divimg">'
													+ '<img src="'+blog.path+'" alt="" class="img-responsive">'
													+ '</div>'
													+ '<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">'
													+ '<dl><dt>'
													+ '<a href="#">'
													+ blog.title
													+ '</a>'
													+ '</dt><dd>'
													+ '<span class="glyphicon glyphicon-user"><a href="#">'
													+ blog.author
													+ ' </a></span>'
													+ '<span class="glyphicon glyphicon-time">2020-88-88</span>'
													+ '</dd><dd class="detil">在投身于社会之际，为了找到符合自己专业和兴趣的工作，更好地适应社会，我希望自己能够做到一种被别人需要的一种状态，至于做什么，就是在实践中，不断的学习、不断的锻炼.因此，我希望加入贵单位，如果能够成为公司的一份子，我相信我一定在自己的岗位上尽职尽责、踏踏实实地贡献之集的一份力量，与公司共同促进、发展。'
													+ '“世界之大，人才济济”。我承认之集还不是最优秀的人才，但是我希望之集是此岗位最合适的人选，希望有幸能够被贵公司领导予以特别考虑。今后我在好的方面再接再厉，不足之处有所改善。我的介绍到此结束。谢谢!</dd><dd>'
													+ '<span> 共 <strong class="text-success">200</strong> 人浏览，点赞 <strong class="text-danger">12 </strong> 个'
													+ '</span></dd></dl></div></div>'
											zxbkBody = zxbkBody + tmp;
										})
						$("#zxbkMain").append(zxbkBody)
					},
					complete : function() {
						console.log("获取" + pageNum + "页数据成功")
					},
					error : function() {
						alert("服务器暂时不可用")
					}
				});
	}
</script>
</head>
<style>
.Divimg img {
	width: 400px;
	height: 200px;
}

.detil {
	width: 100%;
	height: 200px;
}
</style>
<body>
	<!--  最新博客 -->
	<h2 id="zxbk" style="margin-left: 50%">最新博客</h2>
	<div class="row mt-2" id="zxbkMain">
		<!-- 		<div class="col-xs-12 col-sm-12 col-md-10 col-lg-8 col-md-offset-2 col-lg-offset-2">
			<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
				<img src="../images/img1.jpg" alt="" class="img-responsive">
			</div>
			<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
				<dl>
					<dt>
						<a href="#"> XX网站正式上线 </a>
					</dt>
					<dd>
						<span class="glyphicon glyphicon-user"><a href="#"> 作者
						</a></span> <span class="glyphicon glyphicon-time"> 2020-03-20 </span>
					</dd>
					<dd class="bg-success">
						一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开
						发工程师。现在说的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。</dd>
					<dd>
						<span> 共 <strong class="text-success">2126</strong> 人浏览，点赞
							<strong class="text-danger"> 12 </strong> 个
						</span>
					</dd>
				</dl>
			</div>
		</div> -->
	</div>
</body>
</html>